<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>溯源凭证下载</title>
	<link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css">
	<link rel="stylesheet" href="../../static/sa.css">
	<style>
		.certificates-container {
			padding: 20px;
			max-width: 1200px;
			margin: 0 auto;
		}
		.search-panel {
			background: #fff;
			border-radius: 12px;
			box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
			padding: 25px;
			margin-bottom: 25px;
		}
		.search-title {
			font-size: 18px;
			font-weight: 600;
			color: #333;
			margin-bottom: 20px;
			display: flex;
			align-items: center;
			gap: 10px;
		}
		.search-form {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
			gap: 20px;
			align-items: end;
		}
		.form-item {
			display: flex;
			flex-direction: column;
			gap: 8px;
		}
		.form-label {
			font-weight: 500;
			color: #333;
			font-size: 14px;
		}
		.certificates-grid {
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
			gap: 20px;
			margin-bottom: 25px;
		}
		.certificate-card {
			background: #fff;
			border-radius: 12px;
			box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
			overflow: hidden;
			transition: transform 0.2s, box-shadow 0.2s;
			cursor: pointer;
		}
		.certificate-card:hover {
			transform: translateY(-3px);
			box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
		}
		.card-header {
			background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
			color: white;
			padding: 20px;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.card-title {
			font-size: 16px;
			font-weight: 600;
			display: flex;
			align-items: center;
			gap: 10px;
		}
		.cert-type {
			background: rgba(255, 255, 255, 0.2);
			padding: 4px 8px;
			border-radius: 4px;
			font-size: 12px;
		}
		.card-content {
			padding: 20px;
		}
		.cert-info {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 12px;
			margin-bottom: 15px;
		}
		.info-item {
			display: flex;
			flex-direction: column;
			gap: 4px;
		}
		.info-label {
			font-size: 12px;
			color: #666;
			font-weight: 500;
		}
		.info-value {
			font-size: 14px;
			color: #333;
		}
		.cert-preview {
			background: #f8f9fa;
			border: 1px dashed #d9d9d9;
			border-radius: 6px;
			padding: 20px;
			text-align: center;
			margin-bottom: 15px;
			transition: all 0.2s;
		}
		.cert-preview:hover {
			border-color: #409eff;
			background: #f0f9ff;
		}
		.preview-icon {
			font-size: 48px;
			color: #409eff;
			margin-bottom: 10px;
		}
		.preview-text {
			color: #666;
			font-size: 14px;
		}
		.card-actions {
			display: flex;
			gap: 10px;
		}
		.download-stats {
			background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
			color: white;
			border-radius: 12px;
			padding: 25px;
			margin-bottom: 25px;
		}
		.stats-grid {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
			gap: 20px;
			margin-top: 20px;
		}
		.stat-item {
			text-align: center;
			background: rgba(255, 255, 255, 0.1);
			padding: 15px;
			border-radius: 8px;
		}
		.stat-number {
			font-size: 24px;
			font-weight: bold;
			margin-bottom: 5px;
		}
		.stat-label {
			font-size: 14px;
			opacity: 0.9;
		}
		.cert-categories {
			background: #fff;
			border-radius: 12px;
			box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
			padding: 25px;
			margin-bottom: 25px;
		}
		.categories-title {
			font-size: 18px;
			font-weight: 600;
			color: #333;
			margin-bottom: 20px;
			display: flex;
			align-items: center;
			gap: 10px;
		}
		.category-tabs {
			display: flex;
			gap: 10px;
			margin-bottom: 20px;
			flex-wrap: wrap;
		}
		.category-tab {
			padding: 8px 16px;
			border: 1px solid #e9ecef;
			border-radius: 20px;
			cursor: pointer;
			transition: all 0.2s;
			font-size: 14px;
		}
		.category-tab.active {
			background: #409eff;
			color: white;
			border-color: #409eff;
		}
		.category-tab:hover:not(.active) {
			border-color: #409eff;
			color: #409eff;
		}
		.batch-actions {
			background: #fff;
			border-radius: 12px;
			box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
			padding: 20px;
			margin-bottom: 25px;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.selected-info {
			font-size: 14px;
			color: #666;
		}
		.no-data {
			text-align: center;
			padding: 60px 20px;
			color: #999;
		}
		.loading-state {
			text-align: center;
			padding: 60px 20px;
			color: #999;
		}
		.file-size {
			font-size: 12px;
			color: #999;
			background: #f0f0f0;
			padding: 2px 6px;
			border-radius: 4px;
		}
		.valid-status {
			display: inline-flex;
			align-items: center;
			gap: 4px;
			font-size: 12px;
			padding: 2px 8px;
			border-radius: 4px;
		}
		.status-valid {
			background: #f0f9ff;
			color: #1890ff;
		}
		.status-expired {
			background: #fff2f0;
			color: #ff4d4f;
		}
		.status-expiring {
			background: #fffbe6;
			color: #faad14;
		}
	</style>
</head>
<body>
	<div id="app" v-cloak>
		<div class="certificates-container">
			<!-- 页面标题 -->
			<div class="page-title">
				<h2>溯源凭证下载</h2>
				<p>下载质检报告、产地证明等各类溯源凭证文件</p>
			</div>

			<!-- 查询面板 -->
			<div class="search-panel">
				<div class="search-title">
					<i class="el-icon-search"></i>
					凭证查询
				</div>
				<div class="search-form">
					<div class="form-item">
						<label class="form-label">溯源码</label>
						<el-input v-model="searchForm.traceCode" placeholder="请输入溯源码" clearable>
							<el-button slot="append" icon="el-icon-search" @click="searchCertificates"></el-button>
						</el-input>
					</div>
					<div class="form-item">
						<label class="form-label">商品名称</label>
						<el-select v-model="searchForm.product" placeholder="选择商品" clearable>
							<el-option v-for="product in products" :key="product.value" :label="product.label" :value="product.value"></el-option>
						</el-select>
					</div>
					<div class="form-item">
						<label class="form-label">凭证类型</label>
						<el-select v-model="searchForm.certType" placeholder="选择类型" clearable>
							<el-option label="全部类型" value="all"></el-option>
							<el-option label="质检报告" value="quality"></el-option>
							<el-option label="产地证明" value="origin"></el-option>
							<el-option label="运输记录" value="transport"></el-option>
							<el-option label="认证证书" value="certification"></el-option>
						</el-select>
					</div>
					<div class="form-item">
						<label class="form-label">日期范围</label>
						<el-date-picker
							v-model="searchForm.dateRange"
							type="daterange"
							range-separator="至"
							start-placeholder="开始日期"
							end-placeholder="结束日期">
						</el-date-picker>
					</div>
				</div>
			</div>

			<!-- 统计概览 -->
			<div class="download-stats" v-if="hasSearched">
				<h3><i class="el-icon-document"></i> 凭证统计概览</h3>
				<div class="stats-grid">
					<div class="stat-item">
						<div class="stat-number">{{stats.totalCerts}}</div>
						<div class="stat-label">总凭证数</div>
					</div>
					<div class="stat-item">
						<div class="stat-number">{{stats.qualityReports}}</div>
						<div class="stat-label">质检报告</div>
					</div>
					<div class="stat-item">
						<div class="stat-number">{{stats.originCerts}}</div>
						<div class="stat-label">产地证明</div>
					</div>
					<div class="stat-item">
						<div class="stat-number">{{stats.downloadCount}}</div>
						<div class="stat-label">下载次数</div>
					</div>
				</div>
			</div>

			<!-- 分类筛选 -->
			<div class="cert-categories" v-if="hasSearched">
				<div class="categories-title">
					<i class="el-icon-folder"></i>
					凭证分类
				</div>
				<div class="category-tabs">
					<div 
						v-for="category in categories" 
						:key="category.value"
						:class="['category-tab', {active: activeCategory === category.value}]"
						@click="switchCategory(category.value)">
						<i :class="category.icon"></i>
						{{category.label}} ({{category.count}})
					</div>
				</div>
			</div>

			<!-- 批量操作 -->
			<div class="batch-actions" v-if="hasSearched && certificates.length > 0">
				<div class="selected-info">
					已选择 {{selectedCerts.length}} 个凭证
				</div>
				<div>
					<el-button size="small" @click="selectAll">全选</el-button>
					<el-button size="small" @click="clearSelection">清空</el-button>
					<el-button size="small" type="primary" @click="batchDownload" :disabled="selectedCerts.length === 0">
						<i class="el-icon-download"></i> 批量下载
					</el-button>
				</div>
			</div>

			<!-- 凭证列表 -->
			<div v-if="loading" class="loading-state">
				<i class="el-icon-loading" style="font-size: 32px; margin-bottom: 10px;"></i>
				<p>正在查询凭证信息...</p>
			</div>

			<div v-else-if="hasSearched && (!certificates || certificates.length === 0)" class="no-data">
				<i class="el-icon-document" style="font-size: 48px; color: #ddd; margin-bottom: 15px;"></i>
				<p>未找到相关凭证文件</p>
				<el-button size="small" @click="resetSearch">重新查询</el-button>
			</div>

			<div v-else-if="hasSearched" class="certificates-grid">
				<div v-for="cert in filteredCertificates" :key="cert.id" class="certificate-card">
					<div class="card-header">
						<div class="card-title">
							<i :class="cert.icon"></i>
							{{cert.name}}
						</div>
						<span class="cert-type">{{cert.typeName}}</span>
					</div>
					<div class="card-content">
						<div class="cert-info">
							<div class="info-item">
								<span class="info-label">签发机构</span>
								<span class="info-value">{{cert.issuer}}</span>
							</div>
							<div class="info-item">
								<span class="info-label">签发日期</span>
								<span class="info-value">{{cert.issueDate}}</span>
							</div>
							<div class="info-item">
								<span class="info-label">有效期至</span>
								<span class="info-value">{{cert.expireDate}}</span>
							</div>
							<div class="info-item">
								<span class="info-label">文件大小</span>
								<span class="info-value">
									<span class="file-size">{{cert.fileSize}}</span>
								</span>
							</div>
						</div>
						
						<div class="cert-preview" @click="previewCert(cert)">
							<i :class="cert.previewIcon" class="preview-icon"></i>
							<div class="preview-text">点击预览</div>
						</div>
						
						<div style="margin-bottom: 15px;">
							<span :class="['valid-status', 'status-' + cert.validStatus]">
								<i :class="cert.statusIcon"></i>
								{{cert.statusText}}
							</span>
						</div>
						
						<div class="card-actions">
							<el-checkbox v-model="cert.selected" @change="updateSelection">选择</el-checkbox>
							<el-button size="small" @click="previewCert(cert)">预览</el-button>
							<el-button size="small" type="primary" @click="downloadCert(cert)">
								<i class="el-icon-download"></i> 下载
							</el-button>
						</div>
					</div>
				</div>
			</div>

			<!-- 操作提示 -->
			<div v-if="!hasSearched" style="text-align: center; padding: 60px 20px;">
				<i class="el-icon-document" style="font-size: 48px; color: #ddd; margin-bottom: 15px;"></i>
				<p style="color: #999; margin-bottom: 20px;">请输入溯源码或选择查询条件来查看相关凭证</p>
				<el-button type="primary" @click="searchCertificates" :disabled="!searchForm.traceCode && !searchForm.product">开始查询</el-button>
			</div>
		</div>
	</div>

	<!-- 引入依赖 -->
	<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
	<script src="https://unpkg.com/element-ui@2.13.0/lib/index.js"></script>
	<script>
		new Vue({
			el: '#app',
			data() {
				return {
					loading: false,
					hasSearched: false,
					activeCategory: 'all',
					searchForm: {
						traceCode: '',
						product: '',
						certType: 'all',
						dateRange: []
					},
					products: [
						{label: '有机小白菜', value: 'organic_cabbage'},
						{label: '澳洲牛肉', value: 'aussie_beef'},
						{label: '三文鱼', value: 'salmon'},
						{label: '帝王蟹', value: 'king_crab'},
						{label: '冷冻虾仁', value: 'frozen_shrimp'}
					],
					categories: [
						{label: '全部', value: 'all', icon: 'el-icon-folder', count: 0},
						{label: '质检报告', value: 'quality', icon: 'el-icon-document-checked', count: 0},
						{label: '产地证明', value: 'origin', icon: 'el-icon-location', count: 0},
						{label: '运输记录', value: 'transport', icon: 'el-icon-truck', count: 0},
						{label: '认证证书', value: 'certification', icon: 'el-icon-medal', count: 0}
					],
					certificates: [],
					selectedCerts: [],
					stats: {
						totalCerts: 0,
						qualityReports: 0,
						originCerts: 0,
						downloadCount: 0
					}
				}
			},
			computed: {
				filteredCertificates() {
					if (this.activeCategory === 'all') {
						return this.certificates;
					}
					return this.certificates.filter(cert => cert.type === this.activeCategory);
				}
			},
			methods: {
				searchCertificates() {
					if (!this.searchForm.traceCode && !this.searchForm.product) {
						this.$message.warning('请输入溯源码或选择商品');
						return;
					}
					
					this.loading = true;
					this.hasSearched = true;
					
					// 模拟API请求
					setTimeout(() => {
						this.certificates = this.generateMockCertificates();
						this.calculateStats();
						this.updateCategoryCounts();
						this.loading = false;
						
						this.$message.success('查询成功');
					}, 1500);
				},
				
				generateMockCertificates() {
					return [
						{
							id: 1,
							name: '有机认证证书',
							type: 'certification',
							typeName: '认证证书',
							icon: 'el-icon-medal',
							issuer: '中国有机产品认证中心',
							issueDate: '2024-01-10',
							expireDate: '2025-01-10',
							fileSize: '2.3MB',
							validStatus: 'valid',
							statusText: '有效',
							statusIcon: 'el-icon-success',
							previewIcon: 'el-icon-document',
							selected: false
						},
						{
							id: 2,
							name: '产地检验检疫证书',
							type: 'quality',
							typeName: '质检报告',
							icon: 'el-icon-document-checked',
							issuer: '山东出入境检验检疫局',
							issueDate: '2024-01-15',
							expireDate: '2024-07-15',
							fileSize: '1.8MB',
							validStatus: 'expiring',
							statusText: '即将到期',
							statusIcon: 'el-icon-warning',
							previewIcon: 'el-icon-document',
							selected: false
						},
						{
							id: 3,
							name: '农产品产地证明',
							type: 'origin',
							typeName: '产地证明',
							icon: 'el-icon-location',
							issuer: '寿光市农业农村局',
							issueDate: '2024-01-12',
							expireDate: '2024-12-31',
							fileSize: '1.2MB',
							validStatus: 'valid',
							statusText: '有效',
							statusIcon: 'el-icon-success',
							previewIcon: 'el-icon-document',
							selected: false
						},
						{
							id: 4,
							name: '农药残留检测报告',
							type: 'quality',
							typeName: '质检报告',
							icon: 'el-icon-document-checked',
							issuer: '农业部农产品质量监督检验中心',
							issueDate: '2024-01-14',
							expireDate: '2024-04-14',
							fileSize: '3.1MB',
							validStatus: 'valid',
							statusText: '有效',
							statusIcon: 'el-icon-success',
							previewIcon: 'el-icon-document',
							selected: false
						},
						{
							id: 5,
							name: '冷链运输温度记录',
							type: 'transport',
							typeName: '运输记录',
							icon: 'el-icon-truck',
							issuer: '顺丰冷链物流',
							issueDate: '2024-01-17',
							expireDate: '长期有效',
							fileSize: '856KB',
							validStatus: 'valid',
							statusText: '有效',
							statusIcon: 'el-icon-success',
							previewIcon: 'el-icon-data-line',
							selected: false
						},
						{
							id: 6,
							name: '食品安全管理体系认证',
							type: 'certification',
							typeName: '认证证书',
							icon: 'el-icon-medal',
							issuer: 'SGS通标标准技术服务有限公司',
							issueDate: '2024-01-08',
							expireDate: '2027-01-08',
							fileSize: '2.7MB',
							validStatus: 'valid',
							statusText: '有效',
							statusIcon: 'el-icon-success',
							previewIcon: 'el-icon-document',
							selected: false
						}
					];
				},
				
				calculateStats() {
					const certs = this.certificates;
					this.stats = {
						totalCerts: certs.length,
						qualityReports: certs.filter(c => c.type === 'quality').length,
						originCerts: certs.filter(c => c.type === 'origin').length,
						downloadCount: Math.floor(Math.random() * 500) + 100
					};
				},
				
				updateCategoryCounts() {
					this.categories.forEach(category => {
						if (category.value === 'all') {
							category.count = this.certificates.length;
						} else {
							category.count = this.certificates.filter(cert => cert.type === category.value).length;
						}
					});
				},
				
				switchCategory(categoryValue) {
					this.activeCategory = categoryValue;
				},
				
				updateSelection() {
					this.selectedCerts = this.certificates.filter(cert => cert.selected);
				},
				
				selectAll() {
					this.filteredCertificates.forEach(cert => {
						cert.selected = true;
					});
					this.updateSelection();
				},
				
				clearSelection() {
					this.certificates.forEach(cert => {
						cert.selected = false;
					});
					this.updateSelection();
				},
				
				previewCert(cert) {
					this.$message.info(`预览凭证: ${cert.name}`);
					// 实际应用中这里会打开预览弹窗
				},
				
				downloadCert(cert) {
					this.$message.success(`开始下载: ${cert.name}`);
					// 实际应用中这里会触发文件下载
				},
				
				batchDownload() {
					this.$confirm(`确定要下载选中的 ${this.selectedCerts.length} 个凭证吗？`, '批量下载', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'info'
					}).then(() => {
						this.$message.success(`开始批量下载 ${this.selectedCerts.length} 个文件`);
						// 实际应用中这里会触发批量下载
					});
				},
				
				resetSearch() {
					this.searchForm = {
						traceCode: '',
						product: '',
						certType: 'all',
						dateRange: []
					};
					this.hasSearched = false;
					this.certificates = [];
					this.selectedCerts = [];
					this.activeCategory = 'all';
				}
			}
		});
	</script>
</body>
</html>